<template>
  <el-table :data="roleList" style="width: 100%" border
    :header-cell-style="{ backgroundColor: '#f5f7fa', height: '53px' }">
    <el-table-column prop="id" label="序号" width="180" />
    <el-table-column label="角色">
      <template #default="scope">
        <div v-show="!scope.row.flag">
          {{ scope.row.name }}
        </div>
        <div v-show="scope.row.flag">
          <el-input v-model="store.$state.rolelists.name" style="width: 240px" placeholder="Please input" />
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="state" label="启用" width="180">
      <template #default="scope">
        <div v-show="!scope.row.flag">
          <div v-if="scope.row.state === 1">已启用</div>
          <div v-else>未启用</div>
        </div>
        <div v-show="scope.row.flag">
          <el-switch v-model="store.$state.rolelists.state" :active-value="1" :inactive-value="0" />
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="description" label="描述">
      <template #default="scope">
        <div v-show="!scope.row.flag">
          {{ scope.row.description }}
        </div>
        <div v-show="scope.row.flag">
          <el-input v-model="store.$state.rolelists.description" placeholder="Please input" />
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="操作">
      <template #default="scope">
        <div v-show="!scope.row.flag" style="display: flex;color: #409eff;justify-content: space-between;width: 50%;">
          <div @click="handleAp(scope.$index, scope.row)">分配权限</div>
          <div @click="handleEdit(scope.$index, scope.row)">修改</div>
          <div @click="handleDelete(scope.$index, scope.row)">删除</div>
        </div>
        <div v-show="scope.row.flag">
          <el-button size="small" @click="enteredit(scope.$index, scope.row)">确认</el-button>
          <el-button size="small" @click="offeditinput(scope.$index, scope.row)">取消</el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <alerts :permIdsArr="permIdsArr" :render="render"/>
</template>

<script lang="ts" setup>
import { ref, watchEffect } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { deluser, edituser } from "../api/login";
import { useStore } from '@/stores/counter'
import { getRoleDetail } from '@/api/role'

const store = useStore()
let y = defineProps(["roleList", "render", 'handleEdit', 'offeditinput', 'enteredit']);
let bian = ref(false)
//分配权限
let permIdsArr: any = ref([])
const handleAp = (index: number, row: any) => {
  getRoleDetail(row.id).then((res: any) => {
    permIdsArr.value = res.data.data
    // store.$state.permIdsArr = res.data.data
  })
  store.$state.dialogVisible = true
  store.$state.alerttitle = '分配权限'
};


//修改

//取消
const offalert = () => {
  bian.value = false
};
//提交
const submitForm = (formEl: any) => {
};
//删除
const handleDelete = (index: number, row: any) => {
  ElMessageBox.confirm(
    '确认删除该条信息?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      deluser(row.id).then((res) => {
        y.render();
      });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
};

</script>
<style scoped></style>
